<template>
  <div class="home">
    <div class="top">
      <div class="flexEnd textWhite ">
        <div class="title"></div>
        <div class="xx"></div>
        <div class="ryzx ml10 textCenter">
          <div>{{ userName }}</div>
        </div>
        <img
          class="ml20"
          src="../assets/images/home.png"
          alt=""
          title="首页"
          @click="backLogin1"
        />
        <img
          class="ml10"
          src="../assets/images/back.png"
          alt=""
          title="关闭"
          @click="backLogin2"
        />
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="foot">
      <div class="contentList">
        <div
          v-for="(item, index) in menuArr"
          @click="choseMenu(item, index)"
          :key="index"
          :class="index == choseName ? 'chose' : 'noChose'"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setTimeout } from "timers";
// @ is an alias to /src
import {baseServe} from "../request/api";

export default {
  name: "home",
  data() {
    return {
      userName: "",
      choseName: 0,
      menuArr: [
        { name: "用户管理", path: "/supermaster", icon: "user_mag" },
      ],
      treeFlag: false,
      filterText: "",
      data: [
        {
          label: "甘肃省",
          id: 1,
          children: [
            {
              label: "兰州市",
              id: 11,
              children: [
                {
                  label: "城关区",
                  id: 12
                }
              ]
            },
            {
              label: "嘉峪关市",
              id: 2
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      checkedTree: {
        label: "江苏省",
        id: "1"
      }
    };
  },
  computed: {
    loginType() {
      return localStorage.getItem("loginType");
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }

  },
  mounted() {
    // this.choseName = localStorage.getItem("currentLight")||0;
    // this.userName = localStorage.getItem("roles");
    // if (this.loginType == 1) {
    //   this.menuArr = [
    //     { name: "用户管理", path: "/supermaster", icon: "user_mag" },
    //   ]
    // } else if (this.loginType == 2) {
    //   this.menuArr = [
    //     // { name: "分屏配置", path: "/rfsysFpsz", icon: "fp" },
    //     { name: "系统参数配置", path: "/rfsysXtcspz", icon: "param" },
    //     { name: "用户注册", path: "/rfsysYhzc", icon: "reg" }
    //   ];
    // } else if (this.loginType == 3) {
    //   this.menuArr = [
    //     { name: "系统管理员审计", path: "/xtglysj", icon: "sj" },
    //     { name: "安全密保员审计", path: "/aqbmysj", icon: "aqbmy" }
    //   ];
    // }
    //
    // this.treeList();
  },
  methods: {
    // 树状列表渲染
    treeList() {
      this.data = [];
      let params = {
        rfdwnm: 821
      };
      baseServe.cityList( params ).then(res => {
        res = res.data.qgrfdwModels;
        res.forEach(item => {
          this.data.push({
            label: item.rfdwmc,
            id: item.xh,
            children: item.qgrfdwModels.map(i => {
              let obj = {
                label: i.rfdwmc,
                id: i.xh,
                children: i.qgrfdwModels.map(j => {
                  let obj = {
                    label: j.rfdwmc,
                    id: j.xh,
                    children: []
                  };
                  return obj;
                })
              };
              return obj;
            })
          });
        });
      });
    },
    backLogin1() {
      this.$router.push("/");
    },
    backLogin2() {
      //let params = {token: localStorage.getItem("token")}
      this.$axios.get("/logout").then(res => {
        if (res.data.result.resultCode == "000000") {
          this.$message({
            type: "success",
            message: "已退出登录!"
          });
          setTimeout(() => {
            this.$router.push("/");
            localStorage.setItem("token", "");
          }, 1000);
        }
      });
    },
    choseMenu(item, index) {
      this.choseName = index;
      localStorage.setItem("currentLight", index);
      this.$router.push(item.path);
    },
    choseTree() {
      this.treeFlag = true;
    },
    handleNodeClick(data) {
      this.checkedTree = data;
      this.$refs.tree.setCheckedKeys([data.id]);
      this.treeFlag = false;
      this.$store.state.TreeRfdwnm = data.id;
      localStorage.setItem("TreeRfdwnm", data.id);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
  components: {}
};
</script>
<style lang="less" scoped>
.dialogRight::-webkit-scrollbar {
  display: none;
}

.home {
  background-color: #1a303a;
  height: 100%;
  width: 100%;
  position: relative;
  .top {
    height: 60px;
    width: 100%;
    background: url("../assets/images/top.png") no-repeat center center;
    background-size: 100% 100%;
    .flexEnd {
      position: relative;
      padding-right: 7%;
      .mr10 {
        width: 200px;
      }
      .title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
      }
    }
    .xx {
      width: 30px;
      height: 30px;
      background: url("../assets/images/user.png") no-repeat center center;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 120px);
    overflow: hidden;
  }

  .foot {
    position: absolute;
    bottom: 0;
    background: url("../assets/images/foot.png") no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 60px;
    line-height: 60px;
    .contentList {
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      font-family: "Microsoft Yahei";
      height: 100%;
      div {
        padding: 10px 30px;
        text-align: center;
        box-sizing: border-box;
        height: 100%;
      }
      .chose {
        color: #00f0ff;
        font-family: "Microsoft Yahei-Bold";
      }
      .noChose {
        color: #fff;
      }
    }
  }
}
</style>
